<template>
  <Card title="经营者分析" :loading="loading" class="wyf-card">
    <template #extra>
      <JDictSelectTag placeholder="请选择" v-model:value="params['sjfw']" dictCode="tj_sjfw" style="width: 300px" />
    </template>
    <div>
      <div class="flex justify-between"
        ><span class="num-card">{{ grbfb / 10 || 0 }}%</span><span class="num-card">{{ dwbfb / 10 || 0 }}%</span></div
      >
      <a-progress :percent="100" :success="{ percent: grbfb / 10 }" :show-info="false" :stroke-color="['#A0D911']" :size="10" />
      <div class="flex justify-between">
        <div>
          <div class="text-card">个人经营</div>
          <div class="num-card blod">{{ jryfx.gr }}</div>
        </div>
        <div>
          <div class="text-card">单位经营</div>
          <div class="num-card blod">{{ jryfx.dw }}</div>
        </div>
      </div>
    </div>
  </Card>
</template>
<script lang="ts" setup>
  import { onMounted, inject, ref, watch, computed } from 'vue';
  import { Card } from 'ant-design-vue';
  import { JDictSelectTag } from '/@/components/Form';
  import { getWyfTjJyrFx } from '../api';
  const props = defineProps({
    loading: Boolean,
    width: {
      type: String as PropType<string>,
      default: '100%',
    },
    height: {
      type: String as PropType<string>,
      default: '300px',
    },
    ssqy: {
      type: String as PropType<string>,
      default: '',
    },
  });

  const tjfw: any = inject('tjfw');
  const jryfx = ref({
    gr: 0,
    dw: 0,
    zs: 1,
  });
  const params = ref({
    sjfw: '',
    tjfw: tjfw.value,
  });
  const isLoading = ref(false);
  const grbfb = computed(() => {
    return Number((jryfx.value.gr / jryfx.value.zs).toFixed(3)) * 1000;
  });
  const dwbfb = computed(() => {
    return 1000 - grbfb.value;
  });
  function getData() {
    isLoading.value = true;
    getWyfTjJyrFx({ ...params.value, tjfw: tjfw.value }).then((res) => {
      console.log('经营人分析:', res);
      if (res.code == 200 && res.result) {
        jryfx.value = res.result;
      }
      isLoading.value = false;
    });
  }
  // 监听 params 对象的变化并触发数据获取
  watch(
    () => [params.value, tjfw.value],
    () => {
      // 当 params 中的任何属性变化时触发
      getData();
    },
    {
      immediate: true, // 初始化时立即执行一次
      deep: true, // 深度监听对象内部变化
    }
  );
</script>
<style scoped lang="less">
  .wyf-card {
    height: 242px;

    :deep(.ant-card-head) {
      border: none;
    }

    .num-card {
      font-size: 24px;
      color: rgba(0, 0, 0, 0.85);
      line-height: 32px;
    }

    .text-card {
      font-size: 14px;
      color: rgba(0, 0, 0, 0.45);
      line-height: 22px;
    }

    :deep(.ant-progress-inner) {
      .ant-progress-success-bg {
        background-color: #1890ff !important;
      }
    }
  }

  .blod {
    font-weight: 500;
  }
</style>
